<template>
    <div class="header">
        <div class="xx-title">
            <router-link style="text-decoration: none;" to="/">
            <span >xx论坛</span>
        </router-link>
        </div>
        <div class="category">

          <router-link to="/?category=1"  class="categoryitems"> <span>体育</span></router-link>
          <router-link to="/?category=2"  class="categoryitems"> <span>音乐</span></router-link>
          <router-link to="/?category=3"  class="categoryitems"> <span>学习</span></router-link>
        </div>

        <div class="search">
            <el-input
      style="width: 240px"
      placeholder="输入要搜索的内容...."
      v-model="key"
      @change="searchkey"
      :suffix-icon="Search"/>
      <div class="darkmode">
        <span>
            <el-switch v-model="isDark" inline-prompt 
  active-color="var(--el-fill-color-dark)" 
  inactive-color="var(--el-color-primary)" 
  @change="toggleDark" />
        </span>
        <span>
            黑暗模式
        </span>
      </div>
        </div>
        <div class="userinfo" v-if="userinfo.token">
            <div style="margin-right: 30px;"><el-button type="primary" @click="publish">发布帖子</el-button></div>
            <div>  <el-avatar :size="50" :src="baseURL + userinfo.avatar" 
              @click="gouserhome"
              style="cursor: pointer;"
              /></div>
            <div><span class="nickname">{{ userinfo.nickname }}</span></div>
             <!-- 徽章区域 -->
             <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                
                <el-icon class="el-icon--right"><caret-bottom /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="gouserhome" class="clearfix">
                    个人主页
                    <el-badge class="mark" />
                  </el-dropdown-item>

                  <el-dropdown-item @click="changedialogVisible" class="clearfix">
                    修改信息
                    <el-badge class="mark" />
                  </el-dropdown-item>

                  <el-dropdown-item @click="dialogFormVisible = true" class="clearfix">
                    修改密码
                    <el-badge class="mark" />
                  </el-dropdown-item>
                  
                  <el-dropdown-item class="clearfix" @click="handlemylike">
                    我的点赞
                    <el-badge class="mark" />
                  </el-dropdown-item>
                  
                  <el-dropdown-item class="clearfix" @click="handlemycollect">
                    我的收藏
                    <el-badge class="mark" />
                  </el-dropdown-item>
                  <el-dropdown-item @click="dialogVisible" class="clearfix">
                    退出登录
                    <el-badge class="mark" />
                  </el-dropdown-item>
                  <el-dropdown-item @click="dialogVisible2 = true" class="clearfix">
                    用户注销
                    <el-badge class="mark" />
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
        </div>
        <div class="login" v-else>
            <div><router-link to="/login"><el-button type="primary" class="loginitems">登录</el-button></router-link></div>
            <div><router-link to="/register"><el-button class="loginitems">注册</el-button></router-link></div>
        </div>
    </div>

<!-- 修改密码弹框 -->


<el-dialog v-model="dialogFormVisible" title="修改密码" width="500">
    <el-form>
      <el-form-item label="旧密码" :label-width="formLabelWidth">
        <el-input type="password" show-password v-model="oldpassword" autocomplete="off" />
      </el-form-item>
      <el-form-item label="新密码" :label-width="formLabelWidth">
        <el-input type="password" show-password v-model="newpassword" autocomplete="off" />
      </el-form-item>
      <el-form-item label="确认密码" :label-width="formLabelWidth">
        <el-input type="password" show-password v-model="twopassword" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="changeuserpassword">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>


  <!-- 用户注销 -->
       <!-- 提示框 -->
       <el-dialog
    v-model="dialogVisible2"
    title="提示"
    width="500"
  >
    <span>您确定注销吗？</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取消</el-button>
        <el-button type="danger" @click="confimdialogVisible2">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>



</template>
<script setup>

import { Search } from '@element-plus/icons-vue'
import { onMounted, ref, watch, reactive } from 'vue';
import { useUserStore } from '@/stores/user';
import { baseURL } from '@/baseurl';
import { useRouter } from 'vue-router';
import {changepassword,deluser} from '@/apis/user'



const dialogFormVisible = ref(false)
const oldpassword = ref('')
const newpassword = ref('')
const twopassword = ref('')
const formLabelWidth = '140px'
const dialogVisible2 = ref(false)



const router = useRouter()
const userStore = useUserStore();
const userinfo = ref({})
const key = ref('')


 // 切换暗黑模式
 import { useDark, useToggle } from '@vueuse/core'
import Mylike from '../../views/mylike.vue';
import { toast } from '@/composables/utils';
import { t } from '@wangeditor/editor';
 const isDark = useDark()
 const toggleDark = () => useToggle(isDark)
  // 修改信息
 function changedialogVisible() {
  router.push('/change')
 }

 // 监听 userInfo 的变化
watch(
  () => userStore.userInfo,
  (newValue) => {
    userinfo.value=newValue
  },
  { immediate: true } // 立即执行一次回调
);
// 搜索
function searchkey() {
  console.log(key.value);
  router.push('/?key=' + key.value)
  key.value=''
}
// 退出登录
function dialogVisible() {
  userStore.userInfo = {}
  router.push('/login')
}

function gouserhome() {
  router.push('/userhome?id=' + userinfo.value.id)
}
function handlemylike() {
  router.push('/mylike')
}

function handlemycollect() {
  router.push('/myfav')
}


// 修改密码
function changeuserpassword() {
  if (oldpassword.value === '' || newpassword.value === '' || twopassword.value === '') {
    toast('请输入完整信息', 'error')
    dialogFormVisible.value=false
    oldpassword.value = ''
    newpassword.value = ''
    twopassword.value = ''
    return
  } 
  if (newpassword.value !== twopassword.value) {
    toast('两次密码不一致', 'error')
    dialogFormVisible.value=false
    oldpassword.value = ''
    newpassword.value = ''
    twopassword.value = ''
    return
  }
  if (newpassword.value.length < 6) { 
    toast('密码长度不能小于6位', 'error')
    dialogFormVisible.value=false
    oldpassword.value = ''
    newpassword.value = ''
    twopassword.value = ''
    return
  }
  changepassword({
    oldpassword: oldpassword.value,
    newpassword: newpassword.value
  }).then((res) => {
    toast(res.data.msg, 'success')
    dialogVisible()
  }).finally(() => {
    oldpassword.value = ''
    newpassword.value = ''
    twopassword.value = ''
    dialogFormVisible.value = false
  })
}

// 注销用户
function confimdialogVisible2() {
  console.log("用户点击了注销");
  deluser().then(res => {
    toast(res.data.msg, 'success')
    userStore.userInfo={}
    router.push('/')
  }).finally(() => {
    dialogVisible2.value = false
  })
}

 // 在组件挂载时检查数据
onMounted(() => {
  console.log('pinia数据???', userStore.userInfo);
});


// 发布帖子
const publish = (() => {
    router.push('/publish')

})



</script>
<style scoped>
.categoryitems{
  text-decoration: none; /* 去除下划线 */
}
.userinfo{
    margin-right: 100px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 200px;
}
.userinfo .nickname {
    margin-left: 10px;
    font-size: x-large;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block; /* 确保 width 生效 */
}
.header{
    height: 60px;
    width: 100%;
    background-color: aqua;
    margin-left: 0;
    box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.3);
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.el-container {
    padding: 0 !important;
}
.xx-title{
    font-size: XX-large;
    color: white;
    margin-left: 160px;
    cursor: pointer;
}
.login{
    margin-right: 60px;
    display: flex;
    flex-direction: row;
    

}
.search{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.searchinput{
    width: 300px;
    height: 40px;
}
.loginitems{
    margin-left: 20px;
    width:80px;
}
.category{
    margin-left: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 300px;
    align-items: center;
}
.darkmode{
    margin-left: 20px;
}
</style>